<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :title="type === 'detail' ? '查看考评项目定义' : isEdit ? '修改考评项目定义' : '新增考评项目定义'"
    width="50%"
  >
    <el-form
      :disabled="type === 'detail'"
      :rules="rules"
      :model="form"
      ref="form"
      label-width="130px"
    >
      <el-form-item label="考评项目类型：" prop="evalTypeId">
        <el-select
          clearable
          v-model="form.evalTypeId"
          style="width: 100%"
          :readonly="this.type === 'detail'"
        >
          <el-option
            v-for="(item,index) in typeArr"
            :key="index"
            :value="item.evalTypeId"
            :label="item.evalTypeName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="考评项目名称：" prop="evalItemName">
        <el-input
          :readonly="this.type === 'detail'"
          placeholder="请输入考评项目名称"
          v-model="form.evalItemName"
          clearable
        />
      </el-form-item>
      <el-form-item label="考评项目内容：" prop="evalItemContent">
        <el-input
          :readonly="this.type === 'detail'"
          type="textarea"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入考评项目内容"
          v-model="form.evalItemContent"
          maxlength="85"
        />
      </el-form-item>
      <el-form-item label="奖惩标准：" prop="standard">
        <el-input
          :readonly="this.type === 'detail'"
          type="textarea"
          show-word-limit
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入奖惩标准"
          v-model="form.standard"
          maxlength="85"
        />
        <!-- <el-input :readonly="this.type === 'detail'" placeholder="请输入考评标准" v-model="form.rewardStandard" /> -->
      </el-form-item>
      <el-row>
        <el-col>
          <el-form-item label="申报项目" prop="applyFlag">
            <el-radio-group
              size="small"
              v-model="form.applyFlag"
              :disabled="this.type === 'detail'"
            >
              <el-radio-button :label="1">是</el-radio-button>
              <el-radio-button :label="0">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目类型" prop="rewardOrientation">
            <el-radio-group
              v-model="form.rewardOrientation"
              @change="radioChange"
              :disabled="this.type === 'detail'"
            >
              <el-radio :label="1">分</el-radio>
              <el-radio :label="2">钱</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="标准值:"
            prop="rewardStandard"
            :rules="form.rewardOrientation === 2 ? [] : rules.rewardStandard"
          >
            <el-input
              placeholder="请输入标准值"
              :readonly="this.type === 'detail'"
              v-model.number="form.rewardStandard"
              :disabled="form.rewardOrientation === 2"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="奖惩形式：" prop="rewardType">
        <el-checkbox-group v-model="checkList">
          <el-checkbox :label="1" :disabled="this.type === 'detail'">奖</el-checkbox>
          <el-checkbox :label="2" :disabled="this.type === 'detail'">惩</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            :label="form.rewardOrientation === 1 ? '得分下限：' : '考评奖惩下限：'"
            prop="rewardLowLimit"
            :rules="lowLimit ? [] : rules.rewardLowLimit"
          >
            <el-input
              :disabled="lowLimit"
              :readonly="this.type === 'detail'"
              class="mr20"
              placeholder="奖惩下限"
              style="width: 50%"
              v-model="form.rewardLowLimit"
            />
            <el-checkbox
              @change="e => hanleCheck(e, 'lowLimit')"
              v-model="lowLimit"
              label="true"
            >无下限</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="form.rewardOrientation === 1 ? '得分上限：' : '考评奖惩上限：'"
            prop="rewardUpLimit"
            :rules="upLimit ? [] : rules.rewardUpLimit"
          >
            <el-input
              :disabled="upLimit"
              :readonly="this.type === 'detail'"
              class="mr20"
              placeholder="奖惩上限"
              style="width: 50%"
              v-model="form.rewardUpLimit"
            />
            <el-checkbox @change="e => hanleCheck(e, 'upLimit')" v-model="upLimit" label="true">无上限</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="考评对象：" prop="evalTarget">
        <el-radio-group v-model="form.evalTarget" :disabled="this.type === 'detail'">
          <el-radio :value="1" :label="1">科室</el-radio>
          <el-radio :value="3" :label="3">个人</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" v-if="type !== 'detail'" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSure" :disabled="this.type === 'detail'">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { itemCreate, itemUpdate, classifyList } from '@/api/eval'
import { openNotification } from '@/utils/util'
export default {
  data() {
    return {
      checkList: [],
      form: {
        evalTypeId: null,
        evalItemName: null,
        evalItemContent: null,
        rewardStandard: null,
        rewardOrientation: null,
        rewardType: [],
        standard: null,
        rewardUpLimit: null,
        rewardLowLimit: null,
        evalTarget: 1
      },
      rules: {
        evalTypeId: [{ required: true, message: '请输入考评项目类型', trigger: 'change' }],
        evalItemName: [{ required: true, message: '请输入考评项目名称', trigger: 'blur' }],
        evalItemContent: [{ required: true, message: '请输入考评项目内容', trigger: 'blur' }],
        rewardStandard: [
          { required: true, message: '请输入考评项目标准值', trigger: 'blur' },
          { type: 'number', message: '请输入一个数字' }
        ],
        applyFlag: [{ required: true, message: '请选择是否申报项目', trigger: 'change' }],
        rewardOrientation: [{ required: true, message: '请选择奖惩形式', trigger: 'change' }],
        rewardType: [{ required: true, message: '请选择考评形式', trigger: 'blur' }],
        standard: [{ required: true, message: '请输入考评奖惩标准', trigger: 'blur' }],
        rewardUpLimit: [{ required: true, message: '请输入考评奖惩上限', trigger: ['blur', 'change'] }],
        rewardLowLimit: [{ required: true, message: '请输入考评奖惩下限', trigger: ['blur', 'change'] }],
        evalTarget: [{ required: true, message: '请选择考评对象', trigger: 'change' }]
      },
      isEdit: false,
      visible: false,
      typeArr: [],
      upLimit: false,
      lowLimit: false,
      type: '' // 新增，编辑，详情
    }
  },
  watch: {
    checkList: {
      handler(n, o) {
        if (n !== o) {
          console.log('n', n)
          if (n.length > 1) {
            this.$set(this.form, 'rewardType', 3)
          } else {
            this.$set(this.form, 'rewardType', n[0])
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    classifyList().then(res => {
      console.log('res', res)
      this.typeArr = res.data
    })
  },
  methods: {
    hanleCheck(e, type) {
      if (type === 'upLimit') {
        if (e) {
          this.$set(this.form, 'rewardUpLimit', null)
        }
      } else {
        if (e) {
          this.$set(this.form, 'rewardLowLimit', null)
        }
      }
    },
    radioChange(val) {
      if (val === 2) {
        this.$set(this.form, 'rewardStandard', 0)
      } else {
        this.$set(this.form, 'rewardStandard', null)
      }
    },
    edit(type, obj) {
      console.log('view', obj, type)
      this.visible = true
      this.type = type
      this.form = Object.assign({}, obj)
      if (type !== 'add') {
        if (!obj.rewardUpLimit) {
          this.upLimit = true
        }
        if (!obj.rewardLowLimit && obj.rewardLowLimit !== 0) {
          this.lowLimit = true
        }
        if (obj.rewardType === 3) {
          this.checkList.push(1)
          this.checkList.push(2)
        } else {
          this.checkList.push(obj.rewardType)
        }
      } else {
        this.checkList = []
        this.upLimit = false
        this.lowLimit = false
      }
    },
    async handleSure() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log('form', this.form)
          let res = ''
          let mes = ''
          if (this.upLimit) {
            // 如果被勾选，则参数改变,传null
            this.$set(this.form, 'rewardUpLimit', null)
          }
          if (this.lowLimit) {
            this.$set(this.form, 'rewardLowLimit', null)
          }
          console.log('checkList', this.checkList, this.checkList[0], this.checkList.length)

          if (this.checkList.length === 1) {
            this.$set(this.form, 'rewardType', this.checkList[0])
            console.log('form', this.form)
          } else {
            this.$set(this.form, 'rewardType', 3)
          }
          if (this.type === 'edit') {
            res = await itemUpdate(this.form)
            mes = '修改操作成功'
          } else if (this.type === 'add') {
            res = await itemCreate(this.form)
            mes = '新增操作成功'
          }
          openNotification('success', mes)
          this.visible = false
          this.checkList = []
          // 清空选项值
          this.upLimit = false
          this.lowLimit = false
          this.$emit('refresh')
        }
      })
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.el-textarea >>> .el-input__count {
  bottom: -10px;
}
</style>
